<template>
  <base-layout
     :dialog-title="dialogTitle"
    :dialog-visible="false"
    dialog-width="600px"
    :page-show="pageShow"
    @dialog-close="dialogClose"
  >
    <template #toolPanel />
    <template #searchPanel>
      <search-panel :show-add-button="false"  @search="search" :left="true">
            <el-form-item label="账号:">
              <el-input v-model="filters.username" style="width: 200px" clearable placeholder="用户账号" />
            </el-form-item>
            <el-form-item label="登录IP:">
              <el-input v-model="filters.loginip" maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="开始时间:">
              <el-date-picker type="datetime" placeholder="开始时间" clearable format="yyyy-MM-dd HH:mm:ss"   v-model="filters.starttime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间:">
              <el-date-picker type="datetime" placeholder="开始时间" clearable format="yyyy-MM-dd HH:mm:ss"   v-model="filters.endtime" style="width: 100%;"></el-date-picker>
            </el-form-item>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="false"
        :current="start"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </data-table>
    </template>

    <template #dialog>
    </template>

  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import moment from 'moment';
import { getUserLogPage } from '@/api/utilsapi'


export default {
  name: 'SystemManager',
  mixins: [
    baseMixin({
      idName: 'id',
      refresh: '',
      findData:getUserLogPage,
      format(res) {
        return res.map(data => {
          return data
        })
      }
    })
  ],
  data() {
    return {
      buttons: [],
      pageShow: true,
      dialogData:{},
      tableColumnAttributes: [
        { name: '登录用户名称', value: 'username' , formatter : this.userFormatter },
        { name: '登录用户账号', value: 'phonenum' , formatter : this.phonenumFormatter },
        { name: '登录ip', value: 'loginip' },
        { name: '登录时间', value: 'logintime' },
      ],
      filters: {
        username:'',
        loginip:'',
        starttime: '',
        endtime: ''
      }
    }
  },
  methods: {
    async search(form){
      let para = {
        start: 0,
        pageSize: 10,
        username: this.filters.username,
        loginip: this.filters.loginip,
        starttime: this.filters.starttime == "" ? "" : moment(this.filters.starttime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD'),
        endtime: this.filters.endtime == "" ? "" : moment(this.filters.endtime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD')
      };
      this.searchOptions = para;
      this.setTableData()
    },
    userFormatter(row){
      return row.user.username;
    },
    phonenumFormatter(row){
      return row.user.phonenum;
    }
  }
}
</script>
